import React, { Component } from 'react';
import './index.css'
import NavBar from '../../components/NavBar';
import {Radio,List} from 'antd-mobile';
import youhui from '../../assets/images/youhui.png'
import weixin from '../../assets/images/weixin.png'
import zfb from '../../assets/images/zfb.png'
const RadioItem = Radio.RadioItem;
class Recharge extends Component {
    state = {
      id: 0,
      tipslist:[
          { id:0, txt:'您充值的创币可在创别书城各大平台（wap站、web站、客户端）进行使用，充值成功后，不支持退款；' },
          { id:1, txt:'创币不能转换（或购买）为包月业务。充值成功后，不能转卖，不支持账号转移；' },
          { id:2, txt:'图书的收费章节是按每千字5创币收费，不满1千字不收费；' },
          { id:3, txt:'如果在充值过程中遇到任何疑问可直接咨询客服QQ：613762569 或 联系客服电话：18126715509，同时您还可以直接搜索创别书城微信号：chuangbiecom关注后咨询。' }
      ]
    };

    onChange = (id) => {
        console.log(id);
        this.setState({
            id,
        });
    }; 
    

    render() {
      const { id } = this.state;
      const data=[
              {id:0,pic:weixin,title:'微信支付'},
              {id:1,pic:zfb,title:'支付宝'}
          ]
      return (
          <div className="recharge-container">
              <div className='rechargeTop'>
                  <div>充值账号: 书友7716199</div>
                  <div>余额: 10创币</div>
              </div>
              <div className="recharge-price">
                  <div>
                      <p className="rmb">30元</p>
                      <p className="bi">3000创币</p>
                  </div>
                  <div>
                      <p className="rmb">50元</p>
                      <p className="bi">5000创币
                          <span>+1000赠币</span>
                      </p>
                      <li className="youhui">
                          <img src={youhui} alt="" />
                      </li>
                  </div>
                  <div>
                      <p className="rmb">100元</p>
                      <p className="bi">10000创币
                          <span>+2500赠币</span>
                      </p>
                  </div>
                  <div>
                      <p className="rmb">200元</p>
                      <p className="bi">20000创币
                          <span>+6000赠币</span>
                      </p>
                  </div>
                  <div className="marginBotm">
                      <p className="rmb">500元</p>
                      <p className="bi">50000创币
                      <span>+20000赠币</span>
                      </p>
                  </div>
                  <div>
                      <p className="rmb">1000元</p>
                      <p className="bi">100000创币
                      <span>+20000赠币</span>
                      </p>
                  </div>
              </div>
              <List >
                  {data.map(i => (
                  <RadioItem key={i.id} checked={id === i.id} onChange={() => this.onChange(i.id)}>
                     <div className="pay-box">
                          <div className="pay-pic">
                              <img src={i.pic} alt="" style={{ width: '100%',height:'100%'}}/>
                          </div>
                          <div 
                              style={{
                                  flex:1,
                                  height: '.373333rem',
                                  color:'#333',
                                  lineHeight:'.373333rem',
                                  marginLeft:'.066667rem'
                              }}
                          >
                              {i.title}
                          </div>
                     </div>
                  </RadioItem>
                  ))}
              </List>
              
              <div className="tips">
                     <div className="tips-content">
                         <p className="wxts">温馨提示</p>
                         <ol className="tipslist">
                            {
                                this.state.tipslist.map((item) =>{
                                    return (
                                        <li key={item.id}>{item.txt}</li>
                                    )
                                })
                            }
                         </ol>
                    </div>         
                            
              </div>
              <div style={{height:'.6rem'}}></div>
              <NavBar/>             
          </div>
      );
  }
}

export default Recharge;